<template>
  <div class="hello">
    <!-- 输入区域 -->
    <input
      type="text"
      v-model="inputText"
      placeholder="请输入内容"
      style="padding: 8px; border: 2px solid #000;"
    />
    <button @click="clearInput">清空</button>

    <!-- 显示区域 -->
     <div class="center-container">
      <div class="output-area" style="border: 2px solid red; padding: 16px; margin-top: 16px;">
      <h2>{{ inputText }}</h2>
    </div>

     </div>
    
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      inputText: '' // 初始化输入框的内容
    };
  },
  methods: {
    clearInput() {
      this.inputText = ''; // 清空输入框的内容
    }
  }
};
</script>

<style scoped>
/* 样式 */
.hello {
  text-align: center;
}
.center-container{
  display: flex;
  justify-content: center; /* Horizontally center the child element */
  align-items: center; /* Vertically center if needed */
}
.output-area {
  text-align: center;
  width:200px;
 left:50%;
}
</style>
